<script setup lang="ts">
import { UserOutlined, DownOutlined } from '@ant-design/icons-vue'
import { deleteUserUsingPost, listUserByPageUsingPost } from '@/api/userController'
import { computed, ref, onMounted, nextTick } from 'vue'
import defaultAvatar from '@/assets/default.jpg'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import gsap from 'gsap'

const columns = [
  {
    title: '用户id',
    dataIndex: 'id',
  },
  {
    title: '用户账号',
    dataIndex: 'userAccount',
  },
  {
    title: '用户名',
    key: 'userName',
  },
  {
    title: '头像',
    key: 'userAvatar',
  },
  {
    title: '权限',
    dataIndex: 'userRole',
  },
  {
    title: '创建时间',
    key: 'createTime',
  },
  {
    title: '操作',
    key: 'option',
  },
]

const data = ref<any>([])
//分页查询条件
const searchParam = ref({
  current: 1,
  pageSize: 10,
  userRole: '',
  userName: '',
})
const total = ref<any>(0)
// 分页参数
const pagination = computed(() => {
  return {
    current: searchParam.value.current ?? 1,
    pageSize: searchParam.value.pageSize ?? 10,
    total: total.value,
    showSizeChanger: true,
    showTotal: (total) => `共 ${total} 条`,
  }
})

//管理分页查询用户数据
const getUserList = async () => {
  tableLoading.value = true
  try {
    const res = await listUserByPageUsingPost({
      ...searchParam.value,
    })
    if (res.code === 0) {
      data.value = res.data.records ?? []
      total.value = parseInt(res.data.total) ?? 0
    } else {
      message.error('搜索用户列表失败')
    }
  } catch (error) {
    message.error('获取用户列表失败')
    console.error(error)
  } finally {
    tableLoading.value = false
  }
}

// 表格加载状态
const tableLoading = ref(false)

// 删除用户
const onDelete = async (id) => {
  try {
    const res = await deleteUserUsingPost({
      id,
    })
    if (res.code === 0) {
      message.success('删除成功')
      getUserList()
    } else {
      message.error(res.message || '删除失败')
    }
  } catch (error) {
    message.error('删除失败')
    console.error(error)
  }
}

// 搜索用户
const onSearch = () => {
  searchParam.value.current = 1
  getUserList()
}

// 表格变化处理
const onTableChange = (page) => {
  searchParam.value.current = page.current
  searchParam.value.pageSize = page.pageSize
  getUserList()
}

// 角色映射
const roleMap = {
  user: '普通用户',
  admin: '管理员',
  recruiter: '招聘者',
}

onMounted(() => {
  getUserList()
  nextTick(() => {
    gsap.from('#userManager', { opacity: 0, y: 40, duration: 1, ease: 'power3.out' })
    gsap.from('.form', { opacity: 0, y: -20, duration: 0.8, delay: 0.2, ease: 'power2.out' })
    gsap.from('.ant-table', {
      opacity: 0,
      scale: 0.97,
      duration: 0.8,
      delay: 0.4,
      ease: 'back.out(1.7)',
    })
  })
})
</script>

<template>
  <div id="userManager">
    <div class="form">
      <!--  表单  -->
      <a-form layout="inline" :model="searchParam">
        <a-form-item label="用户名">
          <a-input v-model:value="searchParam.userName" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item label="权限">
          <a-select
            v-model:value="searchParam.userRole"
            placeholder="请选择用户权限"
            style="width: 200px"
            allowClear
          >
            <a-select-option value="user">普通用户</a-select-option>
            <a-select-option value="admin">管理员</a-select-option>
            <a-select-option value="recruiter">招聘者</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSearch">搜索</a-button>
        </a-form-item>
      </a-form>
    </div>
    <!--  表格  -->
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      :loading="tableLoading"
      @change="onTableChange"
      row-key="id"
    >
      <!--   自定义表格内容   -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'userName'">
          {{ record.userName ?? '暂无' }}
        </template>
        <template v-if="column.key === 'userAvatar'">
          <a-image :src="record.userAvatar ?? defaultAvatar" width="60px" alt="avatar" />
        </template>
        <template v-if="column.dataIndex === 'userRole'">
          <a-tag
            :color="
              record.userRole === 'admin'
                ? 'red'
                : record.userRole === 'recruiter'
                ? 'green'
                : 'blue'
            "
          >
            {{ roleMap[record.userRole] || record.userRole }}
          </a-tag>
        </template>
        <template v-if="column.key === 'createTime'">
          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template v-if="column.key === 'option'">
          <a-button type="primary" danger @click="onDelete(record.id)">删除</a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<style scoped>
.form {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

#userManager {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.ant-table {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
</style>
